<template>
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      width="600px"
      :showCancel="false"
      @close="dialogConfig.show = false"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="100px"
        @submit.prevent
        hide-required-asterisk
      >
        <!-- 在设置分享时 -->
        <template v-if="showType == 0">
          <!-- 单选 -->
          <el-form-item label="有效期:" prop="validType">
            <el-radio-group v-model="formData.validType">
              <el-radio :label="0">1天</el-radio>
              <el-radio :label="1">7天</el-radio>
              <el-radio :label="2">30天</el-radio>
              <el-radio :label="3">永久有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 提取码 -->
          <el-form-item label="提取码:" prop="codeType">
            <el-radio-group v-model="formData.codeType">
              <el-radio :label="0">自定义</el-radio>
              <el-radio :label="1">系统生成</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--input输入-->
          <el-form-item prop="code" v-if="formData.codeType == 0">
            <el-input
              clearable
              placeholder="请输入5位提取码"
              v-model.trim="formData.code"
              maxLength="5"
              :style="{ width: '130px' }"
            ></el-input>
            <span style="margin-left: 10px; color: var(--text2)"
              >仅支持数字和字母</span
            >
          </el-form-item>
        </template>
        <!-- 展示分享链接 -->
        <template v-else>
          <el-form-item label="分享链接:">
            <div class="share-result">{{ shareUrl }}{{ resultInfo.shareId }}</div>
          </el-form-item>

          <el-form-item label="提取码:">
            <div class="share-result"> {{ resultInfo.code }}</div>
          </el-form-item>

          <el-form-item style="display:flex;justify-content: center;">
            <el-button type="primary" @click="copy">复制链接和提取码</el-button>
          </el-form-item>
        </template>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();

import { ShareFile } from "@/api/showShare";

const shareUrl = ref(document.location.origin + "/share/");
// 0为分享表单  1 为分享链接
const showType = ref(0);
const formData = ref({});
const formDataRef = ref();
const rules = {
  validType: [
    {
      required: true,
      message: "请选择有效期",
    },
  ],
  codeType: [
    {
      required: true,
      message: "请选择提取码类型",
    },
  ],
  code: [
    {
      required: true,
      message: "请输入提取码",
    },
    {
      validator: proxy.Verify.shareCode,
      message: "提取码格式错误",
    },
    {
      min: 5,
      message: "提取码最少5位",
    },
  ],
};
const dialogConfig = ref({
  show: false,
  title: ``,
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        share();
      },
    },
  ],
});
const resultInfo = ref();
const share = async () => {
  // 如果是展示分享链接 就关闭
  if (Object.keys(resultInfo.value).length > 0) {
    dialogConfig.value.show = false;
    return;
  }
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, formData.value);
    let result = await ShareFile(params);
    if (!result) {
      return;
    }
    showType.value = 1;
    resultInfo.value = result.data;
    dialogConfig.value.buttons[0].text = "关闭";
  });
};

const show = (data) => {
  showType.value == 0;
  dialogConfig.value.show = true;
  resultInfo.value = {};
  dialogConfig.value.title = "分享:" + data.fileName;
  data.codeType = 1;
  data.validType = 0;
  nextTick(() => {
    formDataRef.value.resetFields();
    formData.value = Object.assign({}, data);
  });
};
defineExpose({ show });

const copy = async () => {
  await toClipboard(
    `链接:${shareUrl.value}${resultInfo.value.shareId},提取码:${resultInfo.value.code}`
  );
  proxy.Message.success("复制成功~");
};
</script>

<style lang="scss" scoped>
:deep .dialog-body {
  background: #f5f6fa;
  
}
:deep .el-dialog__title {
  color: #303133;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
}
:deep .el-input {
  width: 175px !important;
}
.share-result{
    padding: 0px 10px;
    border-radius: 10px;
    border: 1px solid #d4d7de;
}
</style>